<template>
  <a-card title="流程图" style="margin-top: 10px;">
    <div style="width: 100%; height: 300px;">
      <bpmn-design ref="bpmnDesignRef" :design="false" />
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, nextTick } from 'vue';
import { flowGraph } from '@/api/flow/timeline';
import BpmnDesign from '@/components/bpmn-design/index.vue';

const props = defineProps({
  processInstanceId: {
    type: String,
    default: () => {
      return '';
    }
  },
  processData: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const bpmnDesignRef = ref();

onMounted(() => {
  flowGraph(props.processInstanceId).then(res => {
    const { agreeIds, rejectIds, ingIds } = res.data;
    const all = [...agreeIds, ...rejectIds, ...ingIds];
    const processData = JSON.parse(JSON.stringify(props.processData));
    processData.cells.forEach((cell: any) => {
      if (!cell.data) {
        cell.data = {
          status: ''
        };
      }
      // todo id 生成规则
      const id = `n_${cell.id.replaceAll('-', '')}`;
      if (agreeIds.includes(id)) {
        cell.data.status = 'agree';
      }
      if (rejectIds.includes(id)) {
        cell.data.status = 'reject';
      }
      if (ingIds.includes(id)) {
        cell.data.status = 'ing';
      }
      if (cell.shape === 'edge') {
        const sourceId = `n_${cell.source.cell.replaceAll('-', '')}`;
        const targetId = `n_${cell.target.cell.replaceAll('-', '')}`;
        if ((all.includes(sourceId) || all.includes(targetId)) && !ingIds.includes(sourceId)) {
          console.log(cell.source.cell, cell.target.cell);
          cell.attrs = {
            line: {
              stroke: '#09cc74'
            }
          };
        }
      }
    });
    console.log(processData.cells);
    nextTick(() => {
      bpmnDesignRef.value.setJson(processData);
    });
  });
});
</script>

<script lang="ts">
export default {
  name: 'CardFlow'
};
</script>

<style scoped lang="less">

</style>